<template>
  <div class="c-circle" ref="circle-container">
    <data-v-chart style="height: 100%" @set-opt="onSet"></data-v-chart>
  </div>
</template>

<script>
/* eslint-disable no-unused-vars */
import echarts from "echarts";
// 内圆渐变
let gradient = new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
  { offset: 0, color: "rgba(207, 116, 54, 0)" },
  { offset: 1, color: "rgba(207, 116, 54, 0.8)" }
]);

// 外圈渐变
let gradient2 = new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [
  { offset: 0, color: "rgba(5, 67, 136, 1)" },
  { offset: 0.48, color: "rgba(165, 79, 32, 1)" },
  { offset: 1, color: "rgba(0, 124, 157, 1)" }
]);

export default {
  name: "data-v-circle",
  props: {
    progress: {
      type: [Number, String],
      default: 60
    }
  },
  computed: {},
  created() {},
  data() {
    return {};
  },
  watch: {
    progress(val) {
      if (!this.chart) return;
      let opt = this.createOPtion(this.progress);
      this.chart.setOption(opt);
      this.resizeCenterCircle(this.chart);
    }
  },
  mounted() {},
  methods: {
    onSet(chart) {
      this.chart = chart;
      let zr = chart.getZr();
      let w = chart.getWidth();
      let h = chart.getHeight();
      let cx = w / 2;
      let cy = h / 2;
      let len = w < h ? w : h;

      // 最外圈
      let circle1 = new echarts.graphic.Circle({
        origin: [cx, cy],
        shape: {
          cx: cx,
          cy: cy,
          r: len * 0.4 + 20
        },
        style: {
          stroke: gradient2,
          lineWidth: 5,
          lineDash: [80, 4],
          lineDashOffset: 0,
          fillOpacity: 0,
          strokeOpacity: 0.8
        }
      });

      // 内圈
      let circle2 = new echarts.graphic.Circle({
        origin: [cx, cy],

        shape: {
          cx: cx,
          cy: cy,
          r: len * 0.25
        },
        style: {
          fill: gradient
        }
      });

      // 第二层实心圆
      let circle3 = new echarts.graphic.Circle({
        origin: [cx, cy],
        shape: {
          cx: cx,
          cy: cy,
          r: len * 0.4 + 5
        },
        style: {
          stroke: "#155f8a",
          fillOpacity: 0,
          strokeOpacity: 0.5,
          lineWidth: 3
        }
      });

      // 内层虚线
      let circle4 = new echarts.graphic.Circle({
        origin: [cx, cy],
        shape: {
          cx: cx,
          cy: cy,
          r: len * 0.4 - 5
        },
        style: {
          stroke: "#155f8a",
          fillOpacity: 0,
          lineWidth: 3,
          lineDash: [4]
        }
      });

      zr.add(circle1);
      zr.add(circle3);
      zr.add(circle4);
      zr.add(circle2);

      // 最外层圆圈的旋转
      animateLoop();
      function animateLoop() {
        circle1.animateTo({ rotation: -2 * Math.PI }, 10000, function() {
          console.log("done");
          circle1.attr({
            rotation: 0
          });
          setTimeout(animateLoop, 1);
        });
      }

      // 内层虚线的旋转
      animateLoop2();
      function animateLoop2() {
        circle4.animateTo({ rotation: 2 * Math.PI }, 10000, function() {
          circle4.attr({
            rotation: 0
          });
          setTimeout(animateLoop2, 1);
        });
      }

      //
      this.circle1 = circle1;
      this.circle2 = circle2;
      this.circle3 = circle3;
      this.circle4 = circle4;

      let opt = this.createOPtion(this.progress);
      chart.setOption(opt);
      this.resizeCenterCircle(chart);
      window.addEventListener("resize", () => {
        this.resizeCenterCircle(chart);
      });
    },

    resizeCenterCircle(chart) {
      // eslint-disable-next-line no-unreachable
      let w = chart.getWidth();
      let h = chart.getHeight();
      let zr = chart.getZr();
      let cx = w / 2;
      let cy = h / 2;
      let len = w < h ? w : h;

      this.circle1.attr({
        origin: [cx, cy],
        shape: {
          cx: cx,
          cy: cy,
          r: len * 0.4 + 20
        }
      });

      this.circle2.attr({
        origin: [cx, cy],
        shape: {
          cx: cx,
          cy: cy,
          r: len * 0.25
        }
      });

      this.circle3.attr({
        origin: [cx, cy],
        shape: {
          cx: cx,
          cy: cy,
          r: len * 0.4 + 5
        }
      });

      this.circle4.attr({
        origin: [cx, cy],
        shape: {
          cx: cx,
          cy: cy,
          r: len * 0.4 - 5
        }
      });
    },

    createOPtion(progress) {
      return {
        title: {
          text: [progress] + "%",
          textStyle: {
            color: "rgba(255,255,255,1)",
            fontSize: 30
          },
          subtext: "完成率",
          subtextStyle: {
            color: "rgba(255,255,255,0.8)",
            fontSize: 20
          },
          itemGap: 20,
          left: "center",
          top: "43%"
        },
        tooltip: {
          formatter: function(params) {
            return (
              '<span style="color: #fff;">完成率：' + progress + "%</span>"
            );
          }
        },

        angleAxis: {
          max: 100,
          clockwise: true, // 逆时针
          // 隐藏刻度线
          show: false
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        polar: {
          center: ["50%", "50%"],
          radius: "130%" //图形大小
        },
        series: [
          {
            type: "bar",
            data: [progress],
            showBackground: true,
            backgroundStyle: {
              color: "#CC6F32"
            },
            coordinateSystem: "polar",
            roundCap: true,
            barWidth: 20,
            itemStyle: {
              normal: {
                opacity: 1,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#25BFFF"
                  },
                  {
                    offset: 1,
                    color: "#5284DE"
                  }
                ]),
                shadowBlur: 5,
                shadowColor: "#2A95F9"
              }
            }
          }
        ]
      };
    }
  }
};
</script>

<style lang="less">
.c-circle {
  position: relative;
  height: 100%;
}
</style>
